<template>
  <div>
    <div style="height: 0px">
      <strong style="display: block; margin-top: 10px; text-align: center; font-size: 40px"
        >形变监测</strong
      >
    </div>
    <div className="hello">
      <div className="box">
        <div className="map">
          <div id="map" ref="map"></div>
          <div class="image-gallery">
            <div class="image-item">
              <img src="@/assets/image1.jpg" alt="Image 1" />
              <p>沉降对居民区的影响</p>
            </div>
            <div class="image-item">
              <img src="@/assets/image2.jpg" alt="Image 2" />
              <p>沉降对铁路交通线的影响</p>
            </div>
            <div class="image-item">
              <img src="@/assets/image3.jpg" alt="Image 3" />
              <p>沉降和土地覆盖类型的关系</p>
            </div>
            <div class="image-item">
              <img src="@/assets/image4.jpg" alt="Image 4" />
              <p>香港地区地面形变监测结果</p>
            </div>
            <div class="image-item">
              <img src="@/assets/image5.jpg" alt="Image 5" />
              <p>澳门地区地面形变监测</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
  import { useStore } from "vuex";
  import { onMounted, onUnmounted } from "vue";
  import geoJson from "@/assets/yuegangao.json";
  import regionStylesData from "@/assets/regionStyles.json";
  import L from "leaflet";
  import subsidence from "@/api/local/subsidence.png";
  
  export default {
    name: "subsidenceMonitor",
    mounted() {
      this.$emit("changeTimeIndex", 3);
      this.$emit("changeIsSelect2", true);
      this.$emit("changeIsSelect3", false);
      this.$emit("changeIsTimeOperator", false);
    },
    setup() {
      let mymap;
      const store = useStore();
      let object = {
        user_id: store.state.userinfo.id,
        nums: 10,
      };
      const COLORS = [
      "#FF0000",
      "#FF6F00",
      "#FFB700",
      "#FFFF00",
      "#D2FF69",
      "#91FFB4",
      "#00FFFF",
      "#38ACFF",
      "#3661FF",
      "#0000FF",
    ]; //色标颜色
  
      onMounted(() => {
        initMap();
        updateMap();
      });
      onUnmounted(() => {
        if (mymap) {
          mymap.remove();
          mymap = null;
        }
      });
  
      async function initMap() {
        const guangdongCenter = [22.65087, 114.187367];
        mymap = L.map("map", { attributionControl: false }).setView(
          guangdongCenter,
          11
        );
  
        // 切换底图
        //矢量地图
        const tileLayer1 = L.tileLayer(
          "http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk={accessToken}",
          {
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            accessToken: "c9b286829db376e723c3dbed98c1b25e", // 替换为自己的访问令牌
          }
        );
        //影像地图
        const tileLayer2 = L.tileLayer(
          "http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk={accessToken}",
          {
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            accessToken: "c9b286829db376e723c3dbed98c1b25e", // 替换为自己的访问令牌
          }
        );
        //矢量地名
        const tileLayer3 = L.tileLayer(
          "http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk={accessToken}",
          {
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            accessToken: "c9b286829db376e723c3dbed98c1b25e", // 替换为自己的访问令牌
          }
        );
        //影像地名
        const tileLayer4 = L.tileLayer(
          "http://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk={accessToken}",
          {
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            accessToken: "c9b286829db376e723c3dbed98c1b25e", // 替换为自己的访问令牌
          }
        );
        const baseMaps = {
          区划图: L.layerGroup([tileLayer1, tileLayer3]),
          地形图: L.layerGroup([tileLayer2, tileLayer4]),
        };
        tileLayer1.addTo(mymap);
        tileLayer3.addTo(mymap);
        L.control.layers(baseMaps).addTo(mymap);
  
        // 设置地图缩放范围
        mymap.setMinZoom(4);
        mymap.setMaxZoom(15);
  
        // 中国边界GeoJSON图层
        L.geoJSON(geoJson, {
          style: {
            fillColor: "none",
            fillOpacity: 0,
            color: "black",
            weight: 1,
            fillOpacity: 0.1,
          },
        }).addTo(mymap);
  
        function highlightFeature(e) {
          const layer = e.target;
          layer.setStyle({
            weight: 3,
            color: "#767676",
            fillColor: "#767676",
            dashArray: "",
            fillOpacity: 0.7,
          });
          layer.bringToFront();
        }
  
        function resetHighlight(e) {
          geojson.resetStyle(e.target);
        }
  
        // function zoomToFeature(e) {
        // 	map.fitBounds(e.target.getBounds());
        // }
  
        function onEachFeature(feature, layer) {
          layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            // click: zoomToFeature
          });
        }
  
        // 广东边界GeoJSON图层
        const geojson = L.geoJSON(regionStylesData, {
          style: {
            fillColor: "none",
            fillOpacity: 0,
            color: "black",
            weight: 1,
          },
          onEachFeature,
        }).addTo(mymap);
  
        //色标控件
      const legend = L.control({ position: "bottomright" });
      legend.onAdd = function (map) {
        const div = L.DomUtil.create("div", "legend");
        const grades = [
          -0.228, -0.132, -0.083, -0.047, -0.027, -0.016, -0.008, -0.003, 0.001, 0.008, 0.111,
        ];
        const colors = [];
        const labels = [];
        for (let i = 0; i < grades.length - 1; i++) {
          let from = grades[i];
          let to = grades[i + 1];
          // 为每个色块生成HTML字符串，并使用from作为标签
          if (i===0){
            colors.push(`<i style="background: ${COLORS[i]}; margin-left: 18px; width: 39px; height: 12px; float: left; opacity: 0.76;"></i>`);
          }else{
            colors.push(`<i style="background: ${COLORS[i]}; width: 39px; height: 12px; float: left; opacity: 0.76;"></i>`);
          }
          // 只为色块的开始添加标签（除了最后一个色块）
          labels.push(`<i style="width: 39px; height: 18px; text-align: left; float: left; font-style: normal;">${from}</i>`);
        }

        // 单独处理最后一个标签，以确保它位于最后一个色块的结束处
        labels.push(`<i style="width: 39px; height: 18px; text-align: left; float: left; font-style: normal;">${grades[grades.length - 1]}</i>`);
        div.innerHTML = `<div style="background-color: white; width: 440px; height: 60px; padding:4px">
                   <h3 style=" text-align: center;">年均沉降速率（单位：mm/year）</h3>
                   ${colors.join("") + "<br>" + labels.join("")}</div>`;
        return div;
      };
      legend.addTo(mymap);
        
        return mymap;
      }
  
      async function updateMap() {
        // 添加图像覆盖层
        var imageUrl = subsidence,
            imageBounds = [[22.875965606339150, 113.696575915185290], [22.4257289519195, 114.678204360291578]];
        L.imageOverlay(imageUrl, imageBounds).addTo(mymap);
      }
    },
  };
  </script>
  
  <style scoped lang="scss">
  .time-picker-fixed {
    position: fixed;
    top: 90%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 居中偏移 */
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 8px;
    background-color: transparent;
  }
  
  .time-picker {
    justify-content: center;
    width: 400px;
    display: flex;
    flex-direction: row; /* 水平布局 */
    align-items: center;
    border: 3px solid #007bff;
    padding: 20px;
    border-radius: 8px;
    background-color: #f0f0f0;
  }
  
  .head-name {
    color: #b0e3ff;
    font-weight: bold;
    font-size: xx-large;
    padding: 50px;
  }
  
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  @media screen and (min-width: 700px) {
    .map {
      border: 3px double #c7e8ff;
      background-color: #ffffff;
      margin: 60px;
      width: 70%;
      height: auto;
  
      #map {
        width: 100%;
        height: 65vh;
      }
    }
  }
  
  .custom-input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .custom-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .custom-button:hover {
    background-color: #0056b3;
  }

  .image-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .image-item {
    text-align: center;
    margin-bottom: 20px;
  }

  .image-item img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .image-item p {
    margin: 10px 0 0;
    font-size: 20px;
    color: #333;
  }
  </style>
  